<template>
  <div>
      <el-row class="login_wrap">
          <el-col :span="12">
            <div class="bg">
                <img src="../../assets/logo2.png" alt="">
            </div>
          </el-col>
          <!-- 右边布局 -->
          <el-col :span="12" class="right_wrap">
            <div class="login_info" v-if="viewFlag">
              <h1>登录</h1>
                <el-form :model="loginObj"
                :rules="loginRules">
                  <el-form-item prop="username">
                      <el-input 
                      v-model="loginObj.username"
                      placeholder="输入用户名"
                      :prefix-icon="User"></el-input>
                  </el-form-item>
                    <el-form-item prop="password">
                        <el-input 
                          v-model="loginObj.password"
                          placeholder="输入密码"
                          :prefix-icon="Lock"
                        ></el-input>
                  </el-form-item>
                    <el-form-item class="member">
                      <div>
                        <el-checkbox v-model="rember"></el-checkbox>记住我
                      </div>
                      <el-link type="primary">忘记密码？</el-link>
                  </el-form-item>
                  <el-form-item >
                    <el-button @click="toLogin" style="width:100%;" size="large" type="primary">登录</el-button>
                  </el-form-item>
                </el-form>
              <div class="ctrlView"   @click="changeView(false)">
                注册  →
              </div>
            </div>
            <!-- 注册布局-------------- -->
            <div class="login_info" v-if="!viewFlag">
              <h1>注册</h1>
                <el-form :model="regObj"
                :rules="rules">
                  <el-form-item prop="username">
                      <el-input 
                      v-model="regObj.username"
                      placeholder="输入用户名"
                      :prefix-icon="User"></el-input>
                  </el-form-item>
                    <el-form-item prop="password">
                        <el-input 
                          v-model="regObj.password"
                          placeholder="输入密码"
                          :prefix-icon="Lock"
                        ></el-input>
                  </el-form-item>
                    <el-form-item prop="repassword">
                      <el-input 
                          v-model="regObj.repassword"
                        placeholder="确认密码"
                        :prefix-icon="Lock"
                      ></el-input>
                  </el-form-item>
                  <el-form-item >
                    <el-button @click="toReg" style="width:100%;" size="large" type="primary">注册</el-button>
                  </el-form-item>
                </el-form>
              <div class="ctrlView" @click="changeView(true)">
                ←  返回
              </div>
            </div>
         
        
           
         

          </el-col>
      </el-row>
  </div>
</template>

<script setup lang="ts">
import {ref} from 'vue'
  import {Lock,User} from '@element-plus/icons-vue'
  import {toRegUser,toLoginApi} from '../../api/use'
  import {useRouter} from 'vue-router'
// 使用pinia的内容
  import {tokenStore} from '../../store/token.js'
  let tStore=tokenStore()
  let router=useRouter();

  let viewFlag=ref<boolean>(false) //用来切换登录注册布局的
    // 切换布局
  let changeView=(flag:boolean)=>{
    viewFlag.value=flag
  }

// 创建表单的v-model数据
interface Ireg{
  username:string,
  password:string,
  repassword:string
}

 let regObj=ref<Ireg>({
    username:'',//用户名
    password:'', //密码
    repassword:''//确认密码
 })
// 创建表单的验证规则
 let rules={
    username:[{required:true,message:"用户名必填",trigger:"blur"}],
    password:[ {required:true,message:"密码必填",  trigger:"blur"},
      {min:6,max:15,message:"密码是6-15位",trigger:"blur"}
    ],
   repassword:[ { required: true, message: '请输入密码', trigger: 'blur' },
    {
      pattern: /^\S{6,15}$/,
      message: '密码必须是 6-15位 的非空字符',
      trigger: 'blur'
    },
      { //validator 自定义验证规则函数
              validator: (rule:any, value:string, callback:any) => {
                // 判断 value 和 当前 form 中收集的 password 是否一致
                // value当前输入框的值
                console.log(rule)
                    if (value !== regObj.value.password) {
                      callback(new Error('两次输入密码不一致'))
                    } else {
                      callback() // 就算校验成功，也需要callback
                    }
              },
              trigger: 'blur'
            }
  ]
 }

//  注册接口
let toReg=async ()=>{
  // 调用注册接口方法
  let res=await toRegUser(regObj.value)
  console.log(res)

  if(res.code==0){ //成功提示
      ElMessage.success(res.data.message)
      viewFlag.value=true;//切换到登录
  }

}

// 登录功能--------------------------
interface loginInter{
    username:string,
    password:string
}
// 登录需要的v-model数据
let loginObj=ref<loginInter>({
  username:"",
  password:""
})
let rember=ref<boolean>(true); //记住密码
let loginRules={ 
      username:[{required:true,message:"用户名必填",trigger:"blur"}],
    password:[ {required:true,message:"密码必填",  trigger:"blur"},
      {min:6,max:15,message:"密码是6-15位",trigger:"blur"}
    ],
}
// 登录功能写法
 let toLogin=async ()=>{

    let res=await toLoginApi(loginObj.value)
    console.log(res,"000000");
    if(res.code==0){
      ElMessage.success("登录成功")
      // res.token 存储到pinia一份
      // 
      console.log("1999999999")
      // 调用pinia的actions函数
      tStore.setToken(res.token);
      // 跳转首页
      router.push("/layout")
    }

    if(rember.value){ //记住我

    }else{

    }
 }
// vue-admin 搭建项目

</script>
<style lang="scss">
     .login_wrap{
         height:100vh;
      }
    .bg{
      background:url("../../assets/login_bg.jpg")  no-repeat;
      background-size:100% 100%;
      height:100vh;
      position:relative;
      img{
        position:absolute;
        top:0;
        left:0;
        bottom:0;
        right:0;
        margin:auto;
      }
    }
    .right_wrap{
       position:relative;
        .login_info{
          width:600px;
          height:420px;
           position:absolute;
          top:0;
          left:0;
          bottom:0;
          right:0;
          margin:auto;
          .el-input{
            height:50px;
          }
          .member .el-form-item__content{
            display:flex; 
            justify-content:space-between;
            align-items:center;
          }
      }
    }
  .ctrlView {
    // font-size:30px;
    // width:200px;
    font-size:20px; 
    cursor:pointer;
    font-size:20px; 
  }
</style>
